<template>
    <div id="foot">
        <div v-for="(item,index) in items" :key="index" v-bind:class="[item.class,{newdata:getNewData().indexOf(item.itype)>-1}]" v-on:click="changeHeadTip({val:item.tip})">
            <el-badge v-if="getNewData().indexOf(item.itype)>-1" :value="'new'" class="item">
                <div>
                    <router-link class="link-item" v-bind:to=item.path><i class="icon iconfont" v-bind:class="item.icon"></i></router-link>
                    <router-link class="link-item" v-bind:to=item.path>{{item.tip}}</router-link>
                </div>
            </el-badge>
            <el-badge v-else-if="getMineData()>0 && item.itype>1" :value="getMineData()" class="item">
                <div>
                    <router-link class="link-item" v-bind:to=item.path><i class="icon iconfont" v-bind:class="item.icon"></i></router-link>
                    <router-link class="link-item" v-bind:to=item.path>{{item.tip}}</router-link>
                </div>
            </el-badge>
            <div v-else>
                <router-link class="link-item" v-bind:to=item.path><i class="icon iconfont" v-bind:class="item.icon"></i></router-link>
                <router-link class="link-item" v-bind:to=item.path>{{item.tip}}</router-link>
            </div>
            
        </div>
    </div>
</template>

<script>

import {footNav} from '@/params/foot'
import { mapState,mapMutations } from "vuex"
import '@/assets/icon/iconfont.css'
export default {
    data(){
        return {
            items:footNav,
            arrDetail:[]
        }
    },
    methods:{
        ...mapMutations(["changeHeadTip"]),
        getNewData(){
            var arr = [];
            this.$store.state.newData.forEach((v,k)=>{
                arr.push(v.itype);
                this.arrDetail[v.itype] = v.icount;
            })
            return arr;
        },
        getMineData(){
            var nums = 0;
            this.$store.state.newData.forEach((v,k)=>{
                if(v.itype>1){
                    nums+=v.icount
                }
            })

            return nums;
        }
    }

}
</script>


<style scoped >
#foot {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    background: #333333;
    height:3.8rem;
    display:flex;
    width:100%;
    justify-content:space-around;
    align-items:center;
    position: fixed;
    bottom: 0;
    border-top: 1px solid #DCDFE6;
    box-sizing: border-box;
}
.link-item{
    color:#909399;
}
.router-link-active{
    color:#ffffff;
}
.iconfont{
    display: block;
    font-size: 1.5rem;
}
</style>
